import { mapState, mapGetters } from 'vuex'
import Swiper from '@/components/swiper/swiper.vue'
import Topbar from '@/components/topbar/topbar.vue'
import Gotop from '@/components/gotop/gotop.vue'
export default {
  components: {
    Swiper,
    Topbar,
    Gotop
  },
  data() {
    return {
      goods: {}, // 商品
      comments: [], // 评价
      isShowSpec: false, // 是否显示规格面板
      isShowComment: false, // 是否显示评价面板
      isShowService: false, // 是否显示服务面板
      goodsNumber: 1, // 商品数量
      skuMap: {}, // 商品规格
      activeSkuVal: {}, // 选中规格
      activeSkuId: null, // 选中规格对应id
      activeSkuPrice: '', // 选中规格对应价格
      activeSkuPic: '', // 选中规格对应图片
      isAllSelected: false // 是否全部选中
    }
  },
  computed: {
    ...mapState({
      goodsDetailData: state => state.goodsDetailData,
      cartGoods: state => state.cartGoods,
      token: state => state.token
    }),
    ...mapGetters(['cartGoodsNumber']),
    // 积分
    pointNum() {
      return Math.floor(this.goods.price / 10)
    },
    // 评价
    commentNum() {
      return this.comments.length
    },
    // 是否显示主面板
    isShowMain() {
      return !(this.isShowSpec || this.isShowComment || this.isShowService)
    },
    // 主面板请选择规格数量
    activeSkuDes() {
      return this.isAllSelected ? '已选择：' + Object.values(this.activeSkuVal).join(' ') + 'X' + this.goodsNumber : '请选择规格数量'
    },
    // 规格面板请选择规格数量
    activeSkuSelect() {
      return Object.values(this.activeSkuVal).length === 0 ? '请选择规格数量' : Object.values(this.activeSkuVal).join(' ')
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.$store.state.goodsId = this.$route.query.id
      this.$store.dispatch('getGoodsDetailData')
    },
    // 显示隐藏规格面板
    toggleSpec() {
      this.isShowSpec = !this.isShowSpec
    },
    // 显示隐藏评价面板
    toggleComment() {
      this.isShowComment = !this.isShowComment
    },
    // 显示隐藏服务面板
    toggleService() {
      this.isShowService = !this.isShowService
    },
    // 商品数量加减
    countGoodsNumber(flag) {
      if (flag) {
        this.goodsNumber++
      } else {
        if (this.goodsNumber <= 1) {
          this.$notify({ type: 'success', message: '本商品1件起售', duration: 1000 });
          this.goodsNumber = 1
          return
        }
        this.goodsNumber--
      }
    },
    // 规格选中
    tagVal(event, index) {
      this.activeSkuVal[index] = event.target.innerText
      this.activeSkuVal = Object.assign({}, this.activeSkuVal)
      this.goods.skuList.forEach((value) => {
        let flag = false
        if (Object.values(this.activeSkuVal).length === value.itemSkuSpecValueList.length) {
          this.isAllSelected = true
          flag = true
          value.itemSkuSpecValueList.forEach((val, i) => {
            if (Object.values(this.activeSkuVal)[i] !== val.value) {
              flag = false
            }
          })
        }
        if (flag) {
          this.activeSkuPrice = value.calcPrice
          this.activeSkuPic = value.pic
          this.activeSkuId = value.id
        }
      })
    },
    // 加入购物车
    addCart(panel) {
      if (this.isAllSelected) {
        this.$notify({ type: 'success', message: '加入成功', duration: 1000 });
        if (!this.cartGoods[this.activeSkuId]) {
          let item = {
            [this.activeSkuId]: {
              'supId': this.$route.query.id,
              'name': this.goods.name,
              'pic': this.activeSkuPic,
              'price': this.activeSkuPrice,
              'sku': Object.values(this.activeSkuVal).join('; '),
              'num': this.goodsNumber,
              'checked': true
            }
          }
          this.cartGoods[this.activeSkuId] = item[this.activeSkuId]
        } else {
          this.cartGoods[this.activeSkuId].num += this.goodsNumber
        }
        this.$store.dispatch('updateCart', this.cartGoods)
      } else {
        if (panel === 'sku') {
          for (let key in this.skuMap) {
            if (Object.keys(this.activeSkuVal).indexOf(key) === -1) {
              this.$notify({ type: 'success', message: '请选择' + this.skuMap[key].name, duration: 1000 });
              return
            }
          }
        } else {
          this.toggleSpec()
        }
      }
    }
  },
  watch: {
    goodsDetailData: function (value) {
      if (value) {
        this.goods = value
        this.comments = value.comments
        value.skuList.forEach((val) => {
          val.itemSkuSpecValueList.forEach((item) => {
            if (!this.skuMap[item.id]) {
              this.skuMap[item.id] = {}
              this.skuMap[item.id]['name'] = item.name
              this.skuMap[item.id]['list'] = []
            }
            if (this.skuMap[item.id]['list'].indexOf(item.value) === -1) {
              this.skuMap[item.id]['list'].push(item.value)
            }
          })
        })
      }
    }
  }
}